<!--@用户分页——下拉表格-->
<template>
  <div>
    <ele-table-select
      id="tableSelect"
      :hideOnSinglePage="true"
      popper-class="select-display"
      @select="selectVideo"
      @clear="selectVideo"
      ref="select"
      v-model="form.nickname"
      :clearable="true"
      placeholder="请选择用户"
      value-key="id"
      label-key="nickname"
      :table-config="tableConfig"
      :popper-width="popWidth"
    >
      <!-- 角色列 -->
      <template v-slot:roles="{ row }">
        <el-tag
          v-for="item in row.roles"
          :key="item.roleId"
          size="mini"
          type="primary"
          :disable-transitions="true"
        >
          {{ item.roleName }}
        </el-tag>
      </template>
    </ele-table-select></div>
</template>

<script>
  import {projectPage} from "@/api/creatCenter/authoringClips";
  export default {
    name: "connected-activities",
    props:{
      lists:Array,
      types:Number
    },
    data() {
      return {
        // popWidth:document.body.clientWidth * 0.3 - 120,
        popWidth:0,
        form:{
          nickname:''
        },
        // 回显值
        initValue: undefined,
        // 表格配置
        tableConfig: {
          // 传值进入
          datasource: this.lists,
          columns: [
            {
              prop: 'nickname',
              label: '用户',
              sortable: 'custom',
              showOverflowTooltip: true,
              align: 'center',
            }
          ],
          layout:"prev, pager, next",  //是否，展示页数，和跳转等
          toolbar: false,
          pageSize: 10,
          pageSizes: [ 5, 10, 15, 20],
          size: 'small',
          hideOnSinglePage: true  //只有一页时，是否隐藏分页
        },
      }
    },
    methods:{
      init(){
        this.popWidth= document.getElementById("tableSelect").offsetWidth;
        this.tableConfig.datasource=[]
        this.tableConfig.datasource=this.lists
      },
      // 选择 视频素材
      selectVideo(e){
        console.log('选择 视频素材',e)
        if(e){
          this.form.nickname=e.id //剪辑工程ID
        }
        // clear事件进入
        else{
          this.form.nickname=''  //剪辑工程ID
          // this.hint=''
        }
        this.$emit('getData', e) // 修改
      },
      clear(){
        this.form.nickname=null
      }
    }
  }
</script>

<style scoped lang="less">
</style>
